<template>
	<transition name="fade">
		<div class="login">
			<h1 class="title">上和口腔财务系统</h1>
			<div class="form-group">
				<div class="input-wrapper">
					<img src="@/assets/images/img_02.png" alt="" class="icon" />
					<input type="text" class="input" placeholder="请输入用户账号" v-model="account" />
				</div>
				<div class="input-wrapper">
					<img src="@/assets/images/img_03.png" alt="" class="icon" />
					<input type="password" class="input" placeholder="请输入密码" v-model="password" />
				</div>
				<div class="login-btn" v-loading="loading" @click="handleLogin">登录</div>
			</div>
		</div>
	</transition>
</template>

<script>
	import { Dialog, Toast } from "vant";
	import { mapMutations } from "vuex";
	import axios from "axios";
	export default {
		name: "Login",
		data() {
			return {
				account: "",
				password: "",
				loading: false,
			};
		},
		created() {
			localStorage.clear();
		},
		methods: {
			handleLogin() {
				if (!this.account || !this.password) {
					Toast("请先输入用户名和密码");
					return;
				}
				if (this.loading) {
					return;
				}
				this.loading = true;
				this.$api
					.login({
						account: this.account,
						password: this.password,
					})
					.then((res) => {
						this.loading = false;
						if (res.code === 1) {
							this.$cookies.set("_token_finance", res.data.userinfo.token, 60 * 60 * 24 * 30);
							this.$cookies.set("_user_finance", res.data.userinfo.user_id, 60 * 60 * 24 * 30);
							this.$router.push("/index");
						} else {
							Toast(res.msg);
						}
					})
					.catch((e) => {
						this.loading = false;
					});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.login {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		background: #fff url("~@/assets/images/img_01.png") no-repeat left top;
		background-size: 100% auto;
		padding-top: 3.87rem;
		display: flex;
		align-items: center;
		flex-direction: column;

		.title {
			font-size: 22px;
			color: #000;
			margin-bottom: 1.07rem;
		}

		.form-group {
			.input-wrapper {
				width: 8.35rem;
				height: 1.33rem;
				margin-bottom: 0.37rem;
				display: flex;
				align-items: center;
				border: 1px solid #cfdadb;
				border-radius: 0.67rem;
				padding: 0 0.51rem;

				.icon {
					display: block;
					width: 0.29rem;
					height: auto;
				}

				.input {
					height: 1.28rem;
					width: 6.93rem;
					padding-left: 0.24rem;
					font-size: 12px;

					&::placeholder {
						color: #aaadb5;
					}
				}
			}

			.login-btn {
				width: 8.35rem;
				height: 1.33rem;
				line-height: 1.33rem;
				margin-top: 0.77rem;
				border-radius: 0.67rem;
				background-color: #50b1c2;
				text-align: center;
				font-size: 16px;
				color: #fff;
			}
		}
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: all 0.3s;
	}

	.fade-enter,
	.fade-leave-to {
		transform: translateX(100%);
	}
</style>
